<template>
	<div class="screen_wrap echarts_box flex_wrap">
        <corner></corner>
        <title1 title="站点水质因子分析"></title1>
		<div class="flex_body">
			<e-chart :options="option" style="height:100%" autoresize></e-chart>
		</div>
	</div>		
</template>
<script>
	import { getSwapLatestData } from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'		
	export default {
		components: {
			corner,title1
		},	
		data() {
			return {
				option: null,
				data:[],
				xData:[],
				currentIndex:0,
				allData:null,
				timer:null,
				deptName:'',
				siteName:'',
				collectTime:''
			}
		},
		mounted() {
			this.initData()
			let that=this
			this.timer=setInterval(function(){
				that.currentIndex++
				if(that.currentIndex>=that.allData.length){
					that.currentIndex=0
				}
				that.init()
			},5000)
		},
	    beforeDestroy() {
	       clearInterval(this.timer)
	    },			
		methods: {
			formatLevel(num){
				let str=''
				switch(num) {
				     case 1:
				        str='I类'
				        break;
				     case 2:
				        str='II类'
				        break;
				     case 3:
				        str='III类'
				        break;
				     case 4:
				        str='IV类'
				        break;
				     case 5:
				        str='V类'
				        break;
				     case 6:
				        str='VI类'
				        break;				        
				} 
				return str
			},
			initData(){
				getSwapLatestData().then(res=>{
					
					this.allData=res.data.data
					this.init()
				})
			},
			init() {
				this.xData=[]
				this.data=[]
				let info=this.allData[this.currentIndex]
				this.siteName=info.siteName
				this.deptName=info.deptName
				this.collectTime=info.collectTime
				info.factorList.forEach(item=>{
					let obj={
						name:item.alias,
						max:6
					}
					this.xData.push(obj)
					
					this.data.push(Number(item.level))
				})
				let that=this				
				this.option = {
					"color": ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],				   
				    title: {
				        text:this.deptName+'-'+this.siteName,
				        top: 20,
				        padding:[0,20],
				        left: 'center',
				        textStyle:{
				        	color:this.$fontColor
				        }
				        
				    },						
				    graphic: {
				        elements: [
				            {
				            	type: 'text',
				            	style:{
				            		text:this.collectTime,
				            		fill:'#ccc',
				            		font: '14px "STHeiti"'
				            	},
				            	right:"2%",
				            	top:"90%"
				            }
				        ]
				    },					
					"tooltip": {
						"show": true,
						"trigger": "item",
						extraCssText:'white-space:pre-wrap;padding:10px;line-height:25px',
						formatter:function(params){
							let arr=[]
							for(var i=0;i<that.data.length;i++){
								let str=that.xData[i].name+' : '+that.formatLevel(that.data[i])
								arr.push(str)
							}
							return arr.join('\n')
						}
					},
					"radar": {
						"center": ["50%", "60%"],
						"radius": "55%",
						"startAngle": 90,
						"splitNumber": 6,
						"shape": "polygon",
						"splitArea": {
							"areaStyle": {
								"color": ["transparent"]
							}
						},
						"axisLabel": {
							"show": false,
							"fontSize": 18,
							"color": "#fff",
							"fontStyle": "normal",
							"fontWeight": "normal"
						},
						"axisLine": {
							"show": true,
							"lineStyle": {
								"color": "white" 
							}
						},
						"splitLine": {
							"show": true,
							"lineStyle": {
								"color": "white"
							}
						},
						"indicator":this.xData
					},
					"series": [{
						"name": "关键站点水质因子分析",
						"type": "radar",
						"symbol": "circle",
						"symbolSize": 10,
						"areaStyle": {
							"normal": {
								"color": "rgba(245, 166, 35, 0.4)"
							}
						},
						// 光点设置
						itemStyle: {
							color: 'rgba(245, 166, 35, 1)',
							borderColor: 'rgba(245, 166, 35, 0.3)',
							borderWidth: 10,
						},
						// 虚线设置
						"lineStyle": {
							"normal": {
								"type": "dashed",
								"color": "rgba(245, 166, 35, 1)",
								"width": 2
							}
						},
						"data": [
							this.data
						]
					}]
				}
			}

		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		height: 100%;
	}
	
	.body {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.charts {
		flex: 1;
	}
	
	.headline {
		display: flex;
		color: #fff;
		.title {
			background: #131420;
			padding: 8px 15px;
			display: inline-block;
			font-size: 14px;
			box-shadow: inset 0 0 10px 0 rgba(53, 145, 255, .8);
			border: 1px solid #3591ff80;
		}
	}
</style>